<template>
  <div class="map">
    <BaseMap></BaseMap>
    <header-nav></header-nav>
    <WatchNotice v-if="trafficStore.watchNoticeVisible"></WatchNotice>
    <report-road-conditions></report-road-conditions>
    <NoticeInformation v-if="trafficStore.publicNoticeVisible"></NoticeInformation>
    <ManageNotice v-if="trafficStore.manageNoticeVisible"></ManageNotice>
    <traffic-information></traffic-information>
    <change-password></change-password>
    <user-information></user-information>
    <Popup>
      <AddPopup v-if="trafficStore.addPopupVisible"/>
      <UpdatePopup v-if="trafficStore.updatePopupVisible"/>
    </Popup>
    <event-table></event-table>
    <event-count-chart></event-count-chart>

    <!-- <map-layer-tree /> -->
  </div>

</template>

<script setup>
import { ref, onMounted, getCurrentInstance } from "vue"
import BaseMap from "@/components/BaseMap.vue";
import { useTrafficStore } from "@/stores/counter";
import HeaderNav from "../components/headerNav.vue"
import WatchNotice from "../components/nav-comp/watchNotice.vue"
import ReportRoadConditions from "../components/nav-comp/reportRoadConditions.vue"
import NoticeInformation from "../components/nav-comp/noticeInformation.vue"
import TrafficInformation from "../components/nav-comp/trafficInformation.vue"
import userInformation from "../components/nav-comp/userInformation.vue"
import ChangePassword from "../components/nav-comp/changePassWord.vue"
import Popup from "../components/popup/Popup.vue";
import AddPopup from "../components/popup/AddPopup.vue";
import UpdatePopup from "../components/popup/UpdatePopup.vue";
import ManageNotice from "../components/nav-comp/manageNotice.vue"
import eventTable from '../components/nav-comp/eventTable.vue'
import eventCountChart from '../components/nav-comp/eventCountChart.vue'
const trafficStore = useTrafficStore()
let $docLayer = null
let $map = null
let { proxy } = getCurrentInstance()
onMounted(() => {
  $docLayer = proxy.$docLayer
  $map = proxy.$map
})




</script>

<style scoped>
  .map{
    width: 100%;
    height: 100vh;
    position: relative;
  }
  .content {
  padding: 20px;
}


</style>